<template lang="html">
    <div class="">
        <div class="banner" @click="handleBannerClick">
                  <img cladss="banner-img" :src="bannerImg">
                  <div class="banner-info">
                      <div class="banner-title">{{this.sightName}}</div>
                      <div class="banner-num">
                          <span class="iconfont">&#xe632;</span>{{this.gallaryImhs}}
                      </div>
                  </div>
        </div>
        <common-gallary @close="handleGallaryClose" :imgs="gallaryImhs" v-show="showGallary"></common-gallary>
    </div>

</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
	name: 'Banner',
	components: {
		CommonGallary
	},
	props: {
		sightName: {
			type: String
		},
		bannerImg: {
			type: String
		},
		gallaryImhs: {
			type: Array
		}
	},
	data() {
		return {
			showGallary: false

		}
	},
	methods: {
		handleBannerClick() {
			this.showGallary = true
		},
		handleGallaryClose() {
			this.showGallary = false
		}
	}
}
</script>

<style lang="scss" scoped>
.banner {
    overflow: hidden;
    height: 0;
    padding-bottom: 55%;
    position: relative;
    .banner-img {
        width: 100%;
    }
    .banner-info {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        line-height: 0.6rem;
        color: #fff;
        background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8));

        .banner-title {
            flex: 1;
            font-size: 0.32rem;
            padding: 0 0.3rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .banner-num {
            margin-top: 0.14rem;
            padding: 0 0.4rem;
            height: 0.32rem;
            line-height: 0.32rem;
            font-size: 0.24rem;
            border-radius: 0.2rem;
            background: rgba(0,0,0,.8);
        }
    }
}
</style>
